<template>
  <div>
    <div style="display: flex; flex-wrap: wrap; margin-top: 20px;width:300px;float: left">
      <div :data="arr" class="card-wrapper" style="margin-top: 50px">
        <el-card style="max-width: 1100px;margin-left: 100px">
          <div style="display: flex; align-items: center;">
            <!-- 图片显示在左边 -->
            <div>
              <img :src="arr.pic" alt="小区图片" style="width: 200px; height: 200px; margin-right: 20px;">
              <h3>{{ arr.name }}</h3>
              <p>小区地址：{{ arr.address }}</p> <!-- 假设plotName是小区名称 -->
              <p>所属辖区：{{ arr.divisionName }}</p> <!-- 假设plotName是小区名称 -->
              <p>楼栋：{{ arr.buildingCount }}</p> <!-- 假设plotName是小区名称 -->
              <p>住户：{{ arr.roomCount }}</p> <!-- 假设plotName是小区名称 -->
              <p>实有人口：{{ arr.populationCount }}</p> <!-- 假设plotName是小区名称 -->
            </div>
          </div>
          <div class="card-body" >
            <!-- 详细信息区域，两个字段一组排列 -->
            <div style="width: 200px" @click="change()" >
              <p class="text item">实有人口: {{ arr.populationCount }}</p>
            </div>
            <div style="width: 200px" @click="change1()" >
              <p class="text item">实有房屋: {{ arr.roomCount }}</p>
            </div>
            <div style="width: 200px" @click="change2()" >
              <p class="text item">实有车辆: {{ arr.carCount }}</p>
            </div>
            <div style="width: 200px" @click="change3()" >
              <p class="text item">实有设备: {{ arr.equipmentCount }}</p>
            </div>
          </div>
          <template #footer>
            <div>Footer content</div>
          </template>
        </el-card>
      </div>
    </div>



    <span v-show="this.aa==1">
      <div style="float: right;width: 1600px;margin-top: 20px">
        <div>
          <!-- 不需要直接显示整个数组，因为我们将逐个显示其元素 -->
          <div v-for="item in arr1" style="float: left; margin-left: 100px; display: flex;padding-bottom: 10px">
            <el-card style="max-width: 500px; display: flex;">
              <div style="flex: 1; display: flex;">
                <!-- 图片显示在左边 -->
                <img :src="item.pic" alt="" style="width: 100px; height: 100px; margin-right: 20px;">
                <!-- 数据显示在右边 -->
                <div style="flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start;">
                  <!-- 姓名独占一行，加粗加大 -->
                  <div style="width: 100%; font-weight: bold; font-size: 1.2em;">
                    <p class="text item">{{ item.name }}</p>
                  </div>
                  <!-- 剩余字段两个两个排列 -->
                  <div style="width: 50%;">
                    <p class="text item">性别: {{ item.sex === 0 ? '男' : '女' }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">电话: {{ item.phone }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">类型:
                      <span style="margin-left: 10px" v-if="item.type==0" >户籍人员</span>
                      <span style="margin-left: 10px" v-if="item.type==1" >外来人员</span>
                      <span style="margin-left: 10px" v-if="item.type==2" >境外人员</span>
                    </p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">小区名称: {{ item.plotName }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">楼栋名称: {{ item.buildingName }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">单元名称: {{ item.apartmentName }}</p>
                  </div>
                  <div style="width: 40%;">
                    <p class="text item">房间名称: {{ item.tenementName }}</p>
                  </div>
                  <div style="width: 60%;">
                    <p class="text item">身份证号码: {{ item.idNumber }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">民族: {{ item.nationName }}</p>
                  </div>
                  <!-- 如果需要显示更多信息，可以继续添加 -->
                </div>
              </div>
              <template #footer>Footer content</template>
            </el-card>
          </div>
        </div>
      </div>
    </span>

    <span v-show="this.aa==2">
      <div style="float: right;width: 1600px;margin-top: 20px">
        <div>
          <!-- 不需要直接显示整个数组，因为我们将逐个显示其元素 -->
          <div v-for="item in arr2" style="float: left; margin-left: 100px; display: flex;">
            <el-card style="max-width: 480px; display: flex;">
              <div style="flex: 1; display: flex;">
                <!-- 数据显示在右边 -->
                <div style="flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start;">
                  <div style="width: 50%;">
                    <p class="text item">房间号: {{ item.roomNumber }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">楼层: {{ item.roomNumber.slice(0,1) }}层</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">单元: {{ item.unitName }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">栋: {{ item.buildingName }}</p>
                  </div>
                  <!-- 如果需要显示更多信息，可以继续添加 -->
                </div>
              </div>
              <template #footer>Footer content</template>
            </el-card>
          </div>
        </div>
      </div>
    </span>


    <span v-show="this.aa==3">
      <div style="float: right;width: 1600px;margin-top: 20px">
        <div>
          <!-- 不需要直接显示整个数组，因为我们将逐个显示其元素 -->
          <div v-for="item in arr3" style="float: left; margin-left: 100px; display: flex;">
            <el-card style="max-width: 480px; display: flex;">
              <div style="flex: 1; display: flex;">
                <!-- 图片显示在左边 -->
                <img :src="item.pic" alt="" style="width: 100px; height: 100px; margin-right: 20px;">
                <!-- 数据显示在右边 -->
                <div style="flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start;">
                  <!-- 姓名独占一行，加粗加大 -->
                  <div style="width: 100%; font-weight: bold; font-size: 1.2em;">
                    <p class="text item">车牌：{{ item.licenseNumber }}</p>
                  </div>
                  <!-- 剩余字段两个两个排列 -->
                  <div style="width: 50%;">
                    <p class="text item">车主: {{ item.populationName }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">小区: {{ item.plotName }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">栋楼: {{ item.buildingName }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">单元: {{ item.apartmentName }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">房间: {{ item.roomName }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">证件号码: {{ item.populationIdNumber }}</p>
                  </div>
                  <!-- 如果需要显示更多信息，可以继续添加 -->
                </div>
              </div>
              <template #footer>Footer content</template>
            </el-card>
          </div>
        </div>
      </div>
    </span>

    <span v-show="this.aa==4">
      <div style="float: right;width: 1600px;margin-top: 20px">
        <div>
          <!-- 不需要直接显示整个数组，因为我们将逐个显示其元素 -->
          <div v-for="item in arr4" style="float: left; margin-left: 100px; display: flex;">
            <el-card style="max-width: 480px; display: flex;">
              <div style="flex: 1; display: flex;">
                <!-- 数据显示在右边 -->
                <div style="flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start;">
                  <!-- 姓名独占一行，加粗加大 -->
                  <div style="width: 100%; font-weight: bold; font-size: 1.2em;">
                    <p class="text item">序号：{{ item.id }}</p>
                  </div>
                  <!-- 剩余字段两个两个排列 -->
                  <div style="width: 50%;">
                    <p class="text item">设备名称: {{ item.name }}</p>
                  </div>
                  <div style="width: 50%;">
                    <p class="text item">设备类型:
                      <span style="margin-left: 10px" v-if="item.type==0" >视频设备</span>
                      <span style="margin-left: 10px" v-if="item.type==1" >人脸卡口</span>
                      <span style="margin-left: 10px" v-if="item.type==2" >车辆卡口</span>
                      <span style="margin-left: 10px" v-if="item.type==3" >门禁设备</span>
                    </p>
                  </div>
                  <!-- 如果需要显示更多信息，可以继续添加 -->
                </div>
              </div>
              <template #footer>Footer content</template>
            </el-card>
          </div>
        </div>
      </div>
    </span>


  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {list,findByPlotId,findTeneByPlotIdList,findVehicleTeneByPlotIdList,findVehicleEquipmentByPlotIdList} from "@/api/community/all";
export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        plotId:0,
        arr:[],
        aa:1,
        arr1:[],
        arr2:[],
        arr3:[],
        arr4:[],
        popu:{
          pageNum:1,
          pageSize:20,
          total:1
        },
        vehicle:{
          pageNum:1,
          pageSize:5,
          total:1
        },
        equipment:{
          pageNum:1,
          pageSize:10,
          total:1
        }
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      findVehicleEquipmentByPlotIdList(){
        findVehicleEquipmentByPlotIdList(this.equipment).then(
          res => {
            this.arr4=res.data.list
          }
        )
      },
      findVehicleTeneByPlotIdList(){
        findVehicleTeneByPlotIdList(this.vehicle).then(
          res => {
            this.arr3=res.data.list
          }
        )
      },
      findPopu(){
        findByPlotId(this.plotId).then(
          res => {
            console.log(res.data)
            this.arr1=res.data
          }
        )
      },
      findTeneByPlotIdList(){
        findTeneByPlotIdList(this.plotId).then(
          res => {
            this.arr2=res.data
          }
        )
      },
      change(){
        this.aa=1
      },
      change1(){
        this.aa=2
      },
      change2(){
        this.aa=3
      },
      change3(){
        this.aa=4
      },
      list(){
        list(this.plotId).then(
          res => {
            this.arr=res.data
          }
        )
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.plotId=this.$route.query.id
      this.list()
      this.findPopu(this.plotId)
      this.findTeneByPlotIdList(this.plotId)
      this.vehicle.plotId=this.plotId
      this.findVehicleTeneByPlotIdList()
      this.equipment.plotId=this.plotId
      this.findVehicleEquipmentByPlotIdList()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
